
import * as React from 'react';
import * as ReactDOM from 'react-dom';
/*import * as $ from 'jquery';*/
const $ = require("jquery");
require("./jquery-calendar.js");
    var Calendar = React.createClass({
        getDefaultProps: function () {
            return {
                showStartTime: "出发日期",
                showEndTime: "到达日期",
                isShowEndTime: true,
                defaultStartTime: false,
                defaultEndTime: false,
                minDate: "2014-01-01",
                maxDate: "2018-01-05",
                options: {
                    monthNames: ["一月", "两月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    monthNamesShort: ["一月", "两月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                    dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
                    prevText: "",
                    nextText: "",
                    constrainInput: false,
                    showOn: "both",
                    altFormat: "yy-MM-dd",
                    dateFormat: "yy-mm-dd",
                    closeText: "close",
                    buttonImage: "ddddd",
                    showButtonPanel: false,
                    currentText: "今天",
                    gotoCurrent: true
                },
            };
        },
        getInitialState: function () {
            return {
                showStartTime: "",
                showEndTime: "",
                isShowStartTimeKongJian: false, //是否显示出发时间控件
                isShowEndTimeKongJian: false,//是否显示到达时间控件
                endTimeOption: {}
            }
        },
        handleOn: function () {

        },
        onSelect: function (date, kk) {
            //console.log("date:" + date + "   |" + JSON.stringify(kk))


            //关闭日历控件
            //StartTime
            var $closeTimtKj = "isShow" + kk.settings.refName + "KongJian";
            var $showName = "show" + kk.settings.refName;
            var state = {};
            state[$closeTimtKj] = !this.state[$closeTimtKj];
            state[$showName] = date;
            this.changState(state)
            //console.log("this.state.showStartTime");
            //console.log(JSON.stringify(state))

            var value = "";
            if (typeof(this.props.name) == "string") {
                  value = date;
            } else if (this.props.name instanceof Array) {
                value =[this.state.showStartTime, this.state.showEndTime];
            }
            this.props.setFormValue({"name": this.props.name,"value":value});
            this.props.handleBlur(value)
            /*  this.props.setFormValue({"name":this.props.name,"value":temp});
             this.props.handleBlur(temp.length<1?"":temp);*/


            //开始设置值：

        },
        changState: function (value) {
            //console.log("-----------------------------------" + JSON.stringify(value))
            return this.setState(value)
        },
        getState: function (value) {
            return this.state[value]
        },
        componentWillMount: function () {

            /*  if(typeof(item.name)=="string"){
             data[item.name] = item.value;
             }else if(item.name instanceof Array){
             */
            var state = {}, defaultStartTime, defaultEndTime;


            //this.state.showStartTime
            /* if(typeof(this.props.placeholder)=="string"){
             this.props. showStartTime = this.props.placeholder
             }else if(this.props.placeholder instanceof Array){

             }*/

             if(this.props.defaultValue!=""){
                    if (typeof(this.props.name) == "string") {
                        defaultStartTime = this.props.defaultValue.substring(0,10);
                        this.props.setFormValue({"name": this.props.name,"value":defaultStartTime});
                    } else if (this.props.name instanceof Array) {
                        defaultStartTime = (this.props.defaultValue == "" ? "" : this.props.defaultValue[0].substring(0,10))
                        defaultEndTime = (this.props.defaultValue == "" ? "" : this.props.defaultValue[1].substring(0,10))

                        this.props.setFormValue({"name": this.props.name,"value":[defaultStartTime,defaultEndTime]});

                        //????

                    }

                   /* if (defaultStartTime && defaultStartTime != "") {
                        state.showStartTime = defaultStartTime;
                    } else {
                        state.showStartTime = (this.props.placeholder instanceof Array) ? this.props.placeholder[0] : this.props.placeholder;
                    }

                    this.setState(state)*/
             }

            if (defaultEndTime && defaultEndTime != "") {
                state.showEndTime = defaultEndTime;
            } else {
                state.showEndTime = (this.props.name instanceof Array)?this.props.placeholder[1]:"";
            }
            if (defaultStartTime && defaultStartTime != "") {
                state.showStartTime = defaultStartTime;
            } else {
                state.showStartTime = (this.props.placeholder instanceof Array) ? this.props.placeholder[0] : this.props.placeholder;
            }
            this.setState(state)

            if(this.props.defaultValue!=""){
                this.props.handleBlur(this.props.defaultValue)
            }
            console.log("重新加载一次...............................")


            /*
             if(typeof(item.name)=="string"){
             data[item.name] = item.value;
             }else if(item.name instanceof Array){*/
        },
        showStarTimeKJ: function (state) {
            //console.log("satae:" + state)
            this.setState({
                isShowStartTimeKongJian: !this.state.isShowStartTimeKongJian
            })          //show-calendar
            //console.log(this.state.showSatarTime)
        },
        showEndTimeKJ: function () {
            this.setState({
                isShowEndTimeKongJian: !this.state.isShowEndTimeKongJian
            })

        },
        componentDidMount: function (e) {
            //console.log("!===========================================================!")

            var $parent = $(ReactDOM.findDOMNode(this));
            var $startTime = $("[name='startTime']", $parent);
            var $endTime = $("[name='endTime']", $parent);

            var startOption = Object.create(this.props.options);
            var endOption = Object.create(this.props.options);

            startOption.onSelect = this.onSelect;
            endOption.onSelect = this.onSelect;
            startOption.refName = "StartTime";
            endOption.refName = "EndTime";
            $startTime.datepicker(startOption)
            $endTime.datepicker(endOption)
            //$startTime.datepicker("hide");
            this.$startTime = $startTime;
            this.$endTime = $endTime;
            //  $("[name='endTime']").datepicker();
        },
        removeFile: function (file) {

        },
        handleBlur: function () {
            //console.log("失去焦点")
            /*this.props.handleBlur(this.state.value)*/
        },
        ttt: function() {
            alert(1);
        },
        render: function () {
            var startCss = "data-content " + (this.state.isShowStartTimeKongJian ? "show-calendar" : "");
            var endCss = "data-content " + (this.state.isShowEndTimeKongJian ? "show-calendar" : "");
            //console.log("*****************************   css" + startCss + "   " + endCss + "   " + this.state.showStartTime)
            return (
                <div className="virtual-calendar">
                    <div className="temp">

                        <div className={startCss} name="startTime">
                            <span onBlur={this.ttt} onClick={this.showStarTimeKJ} className="date-s">{this.state.showStartTime}</span>
                            <i className="showTop">{this.props.showStartTime}</i>
                            <i className="icon icon-calendar"></i>
                        </div>

                        {(() => {
                            if (this.props.isShowEndTime) {
                                return (
                                    <div className={endCss} name="endTime">
                                        <span onClick={this.showEndTimeKJ} className="date-s">{this.state.showEndTime}</span>
                                        <i className="showTop">{this.props.showEndTime}</i>
                                        <i className="icon icon-calendar"></i>
                                    </div>
                                )
                            }
                        })()}

                    </div>
                </div>
            )
        }
    })


    module.exports =  Calendar;

